<template>
	<view class="content">
			<u-navbar :is-back="false" title="通讯录" title-color="#404133" title-bold
				:background="{ background: '#f1f1f1'}" :height="44">
				<view class="u-flex u-row-around u-col-center  u-p-30" slot="right">
					<view class="u-m-r-30">
						<u-icon class="u-clear-icon" @click="toSearch()" :size="46" name="search"
							color="#606266"></u-icon>
					</view>
					<view>
						<u-icon name="plus-circle" :size="46" color="#606266" @click="showSelect"></u-icon>
					</view>
				</view>
			</u-navbar>
			<selectInput :list="selectList" :list-key="'name'" :show.sync="selectShow" @on-select="checkSelect"
				@close="closeSelect" />

		<view>
			<!-- <view v-if="vuex_OSPlat=='ios'">
				<view class="u-flex u-row-center u-col-center u-m-16 u-m-b-20" @click="toSearch()"
					style="background-color: #FFFFFF;height: 80rpx;border-radius: 4rpx;color: #c0c0c0;">
					<view class="u-m-r-20">
						<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
					</view>
					<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
				</view>
			</view> -->
			<view style="background-color: #ffffff;">
				<u-index-list :scrollTop="scrollTop" :active-color="'#3CC51F'" :index-list="vuex_contactIndex" :offset-top="88" :sticky="false">
          <u-cell-group>
            <u-cell-item :arrow="false" @click="toApplyList()">
              <view slot="icon" class="u-flex u-row-center u-col-center u-m-r-20"
                style="width: 80rpx;height: 80rpx;background-color: #ff9900;border-radius: 12rpx;">
                <u-icon name="/static/image/contact/tag1.png" :size="50"
                  color="#ffffff"></u-icon>
              </view>
              <view slot="title" class="option-title" style="">新的朋友</view>
              <view slot="right-icon" v-show="badgeNumber>0"
                class="u-flex u-row-center u-col-center"
                style="width:40rpx;height: 40rpx;border-radius: 20rpx;background-color: #fa3534;">
                <view style="color: #FFFFFF;">{{badgeNumber}}</view>
              </view>
            </u-cell-item>
            
          </u-cell-group>
					<view v-for="(item, index) in vuex_contactListData" :key="index">
							<u-index-anchor :index="item.firstLetter" />
							<view v-for="user in item.friends" :key="user.id" class="list-cell" @tap="linkToCard(user)"
								hover-class="message-hover-class">
								<static-image :src="user.avatar" mode="aspectFill" :width="80" :height="80"
									:radius="12">
								</static-image>
								<view class="list-cell-name">{{user.remark || user.name}}</view>
							</view>
					</view>
				</u-index-list>
			</view>
		</view>
	</view>
</template>


<script>
	import searchInput from '@/components/searchInput/index.vue';
	import selectInput from '@/components/selectInput/selectInput.vue';
	export default {
		components: {
			searchInput,
			selectInput
		},
		data() {
			return {
				selectShow: false,
				selectList: [{
						id: '1',
						name: '发起群聊',
						icon: '/static/image/chat/option-1.png'
					},
					{
						id: '2',
						name: '添加朋友',
						icon: '/static/image/chat/option-2.png'
					},
					// {
					// 	id: '3',
					// 	name: '扫一扫',
					// 	icon: '/static/image/chat/option-3.png'
					// }
				],
				scrollTop: 0,
				indexList: [],
				applyList: [],
				badgeNumber: 0,
			};
		},
		onNavigationBarButtonTap: function(e) {
			if (e.index == 0) {
				this.$u.route({
					url: '/pages/chat/friends/addFriend',
				})
			}
		},
		onLoad: function() {
      this.$u.refreshContactList()
      uni.$on('refreshFriendApply', this.checkFriendApply)
		},
		async onPullDownRefresh () {
      await this.$u.refreshContactList()
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1000)
		},
		onShow: function() {
			//检查是否有人添加我为好友	
			this.checkFriendApply();
      if (uni.getStorageSync('contactList_refresh')) {
        uni.removeStorageSync('contactList_refresh')
        this.$u.refreshContactList()
      }
		},

		methods: {
			toSearch: function() {
				this.$u.route({
					url: '/pages/search/searchFriend'
				})
			},
			//打开或者关闭弹窗
			showSelect() {
				this.selectShow = !this.selectShow;
			},
			//关闭弹窗
			closeSelect() {
				//小程序兼容
				this.selectShow = false;
			},
			//点击选择菜单
			//点击选择菜单
			checkSelect(index) {
				let that = this;
				if (index == 0) {
          this.$u.route({
            url: '/pages/chat/chatGroup/launchChat',
            params: {
              type: "1"
            }
          })
				} else if (index == 1) {
					this.$u.route({
						url: '/pages/chat/friends/addFriend',
						params: {}
					})
				} else if (index == 2) {
					this.globalUtil.scanQRcode(that, {
						complete: function(res) {
							console.log("扫码结果", res);
							if (res.resp_code == 1000) {
								let respData = res.resp_result;
								that.$u.route({
									url: '/pages/chat/qr-info/qr-info',
									params: {
										qrInfo: respData
									},
									animationType: 'slide-in-bottom'
								});
							}
						},
					})
				} else {
					//收付款
				}
			},
			//检查是否有人添加我为好友  2022年1月17日21:21:13
			async checkFriendApply () {
        const res = await this.$u.api.imUser.checkFriendApply({})
        this.badgeNumber = res.data;
        // uni.setTabBarBadge({
        //   index: 1,
        //   text: this.badgeNumber
        // })
			},

			//跳转个人信息界面
			linkToCard(friend) {
				//console.log("跳转朋友信息中心",friend);
				this.$u.route({
					url: '/pages/chat/friends/friendHome',
					params: {
						user_id: friend.id,
					},
				})
			},
			//查询申请列表
			toApplyList: function() {
				let that = this;
				this.$u.route({
					url: '/pages/chat/friends/friendApply',
					params: {
						applyList: JSON.stringify(that.applyList)
					},
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;

		.slot-wrap {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
		}

		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 28rpx;
			line-height: 48rpx;
			background-color: #fff;
			align-items: center;

			image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 12rpx;
				flex: 0 0 76rpx;
			}

			&-name {
				padding-left: 20rpx;
			}
		}
	}
</style>